<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="/navbar::header(购买电影)">
</head>
<body>
<!--导航栏-->
<nav th:replace="/navbar::naver"></nav>
<!--内容-->
<div class="container">
    <img src="/static/img/dyp.png" style="width: 150px;height: 150px;margin-left: 43%">
    <p style="margin-top: -1%;font-size: 30px;text-align: center" th:text="'购买:'+${movie.name}"></p>
    <p style="text-align: center;size: 20px;margin-top: -2%;color: #574c50">祝你观影愉快!</p>
</div>
<br>
<div class="zw">
    <h2 class="page-heading" style="margin-left: 5%">请选择您的座位</h2>
    <hr style="margin-top: -1.5%">
    <br>
    <form method="get" th:action="@{/movie/buys}" >
        <div id="seat_area" style="margin-left: 20%">
            <div class="front">屏幕</div>
        </div>
        <div class="booking_area">
        <p>座位：</p>
        <ul class="seats_chose">

        </ul>
        <p>票数：<span class="tickects_num">0</span></p>
        </div>
        <br><br>
        <input id="seat" th:name="seat" th:type="hidden" >
        <input id="quantity" th:name="quantity" th:type="hidden">
        <button class="btn btn-info" id="btn1" onclick="(confirm(`是否购买？`))" style="margin-left: 45%" type="submit">确定购买</button>
    </form>
</div>
<br><br><br>
<script src="http://www.jq22.com/jquery/1.9.1/jquery.min.js"></script>

<script src="../static/js/jquery.seat-charts.min.js" type="text/javascript"></script>

<script type="text/javascript">
    $(document).ready(function() {
        var $cart = $('.seats_chose'), //座位区
            $tickects_num = $('.tickects_num'); //票数

        var sc = $('#seat_area').seatCharts({
            map: [//座位结构图 a 代表座位; 下划线 "_" 代表过道
                'ccccccccc_',
                'ccccccccc_',
                '__________',
                'cccccccccc',
                'cccccccccc',
                'cccccccccc',
                'cccccccccc'
            ],
            naming: {//设置行列等信息
                top: false, //不显示顶部横坐标（行）

                getLabel: function(character, row, column) { //返回座位信息
                    return column;
                }
            },
            legend: {//定义图例
                node: $('#my-legend-container'),
                items: [
                    ['c', 'available', '可选座'],
                    ['c', 'unavailable', '已售出']
                ]
            },
            click: function() {
                if (this.status() == 'available') { //若为可选座状态，添加座位
                    $('<li>' + (this.settings.row + 1) + '排' + this.settings.label + '座</li>')
                        .attr('id', 'cart-item-' + this.settings.id)
                        .data('seat', this.settings.id)
                        .appendTo($cart);
                    $tickects_num.text(sc.find('selected').length + 1); //统计选票数量
                    var seat= $(".seats_chose").text();
                    var quantity= $(".tickects_num").text();
                    document.getElementById("seat").value=seat;
                    document.getElementById("quantity").value=quantity;
                    return 'selected';
                } else if (this.status() == 'selected') { //若为选中状态
                    $tickects_num.text(sc.find('selected').length - 1);//更新票数量
                    $('#cart-item-' + this.settings.id).remove();//删除已预订座位
                    var seat= $(".seats_chose").text();
                    var quantity= $(".tickects_num").text();
                    document.getElementById("seat").value=seat;
                    document.getElementById("quantity").value=quantity;
                    return 'available';
                } else if (this.status() == 'unavailable') { //若为已售出状态
                    return 'unavailable';
                } else {
                    return this.style();
                }
            },
        });


    });
</script>
<!--页尾-->
<footer th:replace="/navbar::footer"></footer>
</body>
</html>